<script lang="ts" setup>
import { ElButton, ElTable, ElTableColumn } from 'element-plus';
import { NavBar } from 'vant';
import moment from 'moment'
import DateRangePick from '~/components/order/edit/DateRangePick.vue';
import { OrderModel } from '~/model';
import { OrderApi } from '~/api/OrderApi'
import lodash from 'lodash'

const route = useRoute()
const router = useRouter()
const dsts = useLocalStorage('calculate-start', 0)
const dets = useLocalStorage('calculate-end', 0)
const orders = ref([] as OrderModel[])

const showDateRangePick = ref(false)
function picked(d1ts: number, d2ts: number) {
  dsts.value = d1ts
  dets.value = d2ts
}

async function getData() {
  if (dsts.value != 0 && dets.value != 0) {
    const paged = await OrderApi.getPaged(1, 10000000, {
      date_start: moment(dsts.value).format('YYYY-MM-DD'),
      date_end: moment(dets.value + 86400 * 1000).format('YYYY-MM-DD'),
    })
    orders.value = paged.objects
  }
}

const filter = ref('')

const ordersFiltered = computed(() => {
  return orders.value
})

const ordersTable = computed(() => {
  const obj = lodash.cloneDeep(ordersFiltered.value) as Partial<OrderModel>[]
  obj.forEach(order => {
    delete order.items
  })
  return obj
})

watch(dsts, () => {
  getData()
})

watch(dets, () => {
  getData()
})

onMounted(() => {
  getData()
})

const tableTitles = computed(() => {
  if (!ordersTable.value.length) {
    return []
  }
  return Object.keys(ordersTable.value[0])
})

function exportData() {

}

function colDisplay(data: any) {
  if (typeof data === 'object' && data.hasOwnProperty('name')) {
    return data.name
  }
  if (data instanceof Date) {
    return moment(data).format('YYYY-MM-DD')
  }
  return data
}
</script>

<template>
  <div min-h-full>
    <NavBar
      title="计算"
      left-text="返回"
      left-arrow
      @click-left="$router.replace('/')"
    />
    
    <DateRangePick v-model:modelValue="showDateRangePick" @update:date-range="picked"/>
    <div p4>
      <div paper flex>
        <div>订单范围: {{moment(dsts).format('YYYY-MM-DD')}} - {{moment(dets).format('YYYY-MM-DD')}}</div>
        <ElButton ml-auto type="primary" size="small" @click="showDateRangePick=true">修改</ElButton>
      </div>

      <div paper>
        数据数量: {{ orders.length }}
      </div>

      <div>
        <ElTable v-if="orders.length < 50" :data="ordersTable">
          <ElTableColumn v-for="(key, index) in tableTitles" :key="index"
            :prop="key" :label="key" width="120">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                {{ colDisplay(scope.row[key]) }}
              </div>
            </template>
          </ElTableColumn>
        </ElTable>
        <div v-else paper flex flex-col items-center justify-center>
          <div mb2>数据过多，请导出查看</div>
          <ElButton type="primary" size="small" @click="exportData">导出</ElButton>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>
